<template>
  <div class="addCard">
    <header>
      <span @click="GoClick()"><svg-icon iconClass="back"/></span>
      <span>银行卡</span>
      <span>...</span>
    </header>
    <div class="main">
      <div class="alertBox">
        <div class="head">
          <span @click="onClick()">X</span>
          <span>请输入钱包密码</span>
          <span></span>
        </div>
        <p>
          解除
          <b>建设银行(尾号3542)</b>银行卡绑定
        </p>
       <van-password-input
  :value="value"
  info="密码为 6 位数字"
  :error-info="errorInfo"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
  class="input"
/>
<van-number-keyboard
  v-model="value"
  :show="showKeyboard"
  @blur="showKeyboard = false"
/>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      value: '',
      errorInfo: '',
      showKeyboard: false,
    };
  },
  methods: {
    onClick() {
      this.$router.go(-1);
    },
    GoClick(){
      this.$router.go(-1);

    }
  },

   watch: {
    value(value) {
      if (value.length === 6 && value === '123456') {
        Dialog({ message: "解绑成功"});
      
        this.$router.push("/cardlist")
      } else {
        // this.errorInfo = '';
      this.errorInfo = ''
          // alert(this.errorInfo)
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.input {
  margin-top: px2rem(20);
}
.addCard {
  width: 100%;
  height: 100%;
  font-size: $titleSize;
  display: flex;
  flex-direction: column;
  header {
    height: px2rem(50);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #f5f5f5;
  }
}
.main {
  flex: 1;
  background: #666;
  overflow: hidden;
}
.alertBox {
  width: px2rem(355);
  height: px2rem(160);
  background: #fff;
  z-index: 9999;
  margin: px2rem(230) px2rem(10);
  border-radius: px2rem(10);
  p {
    text-align: center;
    font-size: px2rem(16);
    color: #ccc;
    b {
      margin: 0 px2rem(15);
      color: #000;
    }
  }
}
.head {
  height: px2rem(40);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-weight: bold;
  font-size: px2rem(16);
}
</style>